<template>
  <el-dialog
    :title="'工具测试/' + testRow.name"
    :visible.sync="showDialog"
    width="50%"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="form" :model="form" label-width="120px">
      <div v-for="(item, index) in testRow.parameters" :key="index">
        <el-form-item :label="item.name">
          <el-input
            v-model="item.value"
            :placeholder="item.description"
          ></el-input>
        </el-form-item>
      </div>
      <div class="btn_center">
        <el-button
          type="primary"
          :loading="isTesting"
          :disabled="isTesting"
          @click="testTool"
        >
          {{ isTesting ? "测试中..." : "测试" }}
        </el-button>
      </div>
    </el-form>

    <taskRun title="接口返回值" :task_result="taskRunResult" />
  </el-dialog>
</template>
<script>
import taskRun from "@/components/AppCreate/task/taskRun.vue";
import { testTool } from "@/api/tool";
import { Message, Loading } from "element-ui";

export default {
  name: "TESTTOOL",
  components: {
    taskRun,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    testRow: {
      type: Object,
      default: true,
    },
  },
  data() {
    return {
      showDialog: this.visible,
      testParams: null,
      form: {},
      outputJson: {
        s: "s",
      },
      taskRunResult: {},
      url: "",
      method: "",
      params: "",
      isTesting: false,
    };
  },
  created() {},
  methods: {
    testTool() {
      this.isTesting = true;
      const Querydata = {
        id: this.testRow.id,
        params: this.testRow.parameters,
      };

      testTool(Querydata)
        .then((res) => {
          this.taskRunResult = res;
          this.$message.success("测试完成！");
        })
        .catch((err) => {
          this.$message.error(`测试失败：${err.message}`);
        })
        .finally(() => {
          this.isTesting = false;
        });
    },
    cancel() {
      this.$emit("cancelTest");
    },
  },
  watch: {
    visible(newValue) {
      this.showDialog = newValue;
    },
  },
};
</script>
<style scoped>
.output-wrap {
  margin-top: 20px;
}
.btn_center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.run-coloring {
  background: #b3d4fc;
  padding-top: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>